Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条 您所在的位置:网站首页 El tabs表头滚动条 Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条

Ant Design Vue的Table组件设置scroll属性时,表头去掉滚动条

2024-03-14 22:06| 来源: 网络整理| 查看: 265

未去除之前效果:

去除后效果:

只需要去除header的 overflow: scroll属性即可

使用代码:

>>> .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden!important; margin-bottom: 0!important; padding-right: 6px; }

效果如图:

最右侧没有边框,因为:最后一个th右边框颜色透明了,我们给他设置上边框颜色

>>> .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child { border-right-color: #e8e8e8!important; }

效果如图:

 

 我这里给table加的有bordered属性,去掉bordered效果如下:

 这就比较完美了,但是如果加上bordered属性,边框外的阴影就比较丑了,如何去掉呢,很简单,

 代码如下:

>>> .ant-table-header { background: #fff; }

最后效果如下图:

 

 完成代码如下:

/*去除表头垂直滚动条 begin*/ >>> .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden!important; margin-bottom: 0!important; padding-right: 6px; } >>> .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child { border-right-color: #e8e8e8!important; } >>> .ant-table-header { background: #fff; } /*去除表头垂直滚动条 end*/



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有